{sm_shop_template 'common/header'}
<link rel="stylesheet" href="/addons/sm_shop_plugin_diy/admin/assets/css/diy.css">
<div id="container">
    {sm_shop_plugin_diy_template 'common/nav'}
    <div id="content">
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <a href="{php echo $this->url_pre .'&r=diy.page_edit'}"
                       data-toggle="tooltip" title="创建" class="btn btn-info">
                        <i class="fa fa-plus"></i>
                    </a>


                </div>
                <h1>自定义页面</h1>
                <ul class="breadcrumb">
                    <li><a href="">首页</a></li>
                    <li><a href="">列表</a></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
            <div class="col-md-12  col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="fa fa-list"></i>自定义页面列表</h3>
                    </div>
                    <div class="panel-body">
                        <form method="post" action="" enctype="multipart/form-data" id="form-order">
                            <div class="table-responsive">
                                <table id="order-list" class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <td style="width: 1px;" class="text-center">
                                            <input type="checkbox" onclick="$('input[name*=\'selected\']').trigger('click');"></td>
                                        <td class="text-left">
                                            <a  class="desc">ID</a> </td>
                                        <td class="text-right">
                                            <a >名称</a> </td>
                                        <td class="text-right">
                                            <a >首页</a> </td>
                                        <td class="text-right">
                                            <a >状态</a> </td>
                                        <td class="text-right">
                                            <a >生成日期</a> </td>
                                        <!--<td class="text-left">
                                            <a >修改日期</a> </td>-->
                                        <td class="text-right">管理</td>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    <tr v-if="diy_list.length>0" v-for="item in diy_list">
                                        <td class="text-center">
                                            <input type="checkbox"  v-model="selected_diy" name="selected[]" v-bind:value="item.id">
                                        </td>
                                        <td class="text-left">{{item.id}}</td>
                                        <td class="text-left">{{item.title}}</td>
                                        <td class="text-right">
                                            <span v-show="item.id==home">是</span>
                                            <span v-show="item.id!=home">否</span>
                                        </td>
                                        <td class="text-right">
                                            <span v-show="item.status">是</span>
                                            <span v-show="!item.status">否</span>
                                        </td>
                                        <td class="text-right">{{item.created_at}}</td>

                                        <td class="text-right">

                                            <a class="button" v-bind:href=" url_pre + '&r=diy.page_edit&diy_id=' + item.id ">
                                                <el-tooltip content="编辑" placement="top">
                                                    <i class="el-icon-edit"></i>
                                                </el-tooltip>

                                            </a>

                                            <a  class="button"
                                                v-show="item.id!=home"
                                                @click="setHome( item )">
                                                <el-tooltip content="设为首页" placement="top">
                                                    <i class="gray el-icon-s-home" ></i>
                                                </el-tooltip>

                                            </a>
                                            <a  class="button"
                                                v-show="item.id==home"
                                                @click="cancelHome( item )">
                                                <el-tooltip content="取消设为首页" placement="top">
                                                    <i class=" el-icon-s-home " ></i>
                                                </el-tooltip>

                                            </a>

                                            <a  class="button" @click="diy_delete( item )">
                                                <el-tooltip content="删除" placement="top">
                                                    <i class=" el-icon-delete" ></i>
                                                </el-tooltip>
                                            </a>
                                        </td>

                                    </tr>

                                    <tr v-if="diy_list.length==0" >
                                        <td class="text-center" colspan="8">没有结果！</td>
                                    </tr>
                                    </tbody>

                                </table>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-sm-6 text-left"></div>
                            <div class="col-sm-6 text-right">显示 0 - 0 / 合计 0（共 0 页）</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
{sm_shop_template 'common/footer'}
<script>

    var diy = new Vue({

        el:'#container',
        data:function(){

            return {
                home:0,
                url_pre: '{php echo $this->url_pre;}',
                diy_list:[],
                selected_diy:'',
            }
        },

        methods:{

            get_list:function(){

                var t = this;
                var url = this.url_pre + '&r=diy.index';
                t.home = 0;
                axios.get( url ).then(function( res ){

                    t.diy_list = res.data.list;
                    if( res.data.home ){
                        t.home = res.data.home;
                    }


                });

            },

            setHome:function( diy ){

                var t = this;
                var url = this.url_pre + '&r=diy.set_home';
                var data = {
                    diy_id : diy.id
                };
                axios.post( url, data ).then(function(){
                    t.get_list();
                });
            },

            cancelHome:function( diy ){

                var t = this;
                var url = this.url_pre + '&r=diy.cancel_home';
                var data = {
                    diy_id : diy.id
                };
                axios.post( url, data ).then(function(){
                    t.get_list();
                });
            },

            diy_delete:function( diy ){
                var t = this;
                var url = this.url_pre + '&r=diy.delete';
                var data = {
                    diy_id : diy.id
                };
                axios.post( url, data ).then(function( res ){
                    if( res.data.status ){
                        alert( res.data.description );
                        return;
                    }
                    t.get_list();
                });
            }

        },

        created:function(){

            this.get_list();

        }

    });
</script>